<template>
	<view class='issue'>
		<view class="issue-head">
			<slot name="headPic"></slot>
			<image v-if="headPicShow" :src="headPicValue" class="issue-head-pic" mode=""></image>
			
			<!-- <text v-if="headTitleShow" class="issue-head-title">{{headTitleValue.slice(0,5)}}</text> -->
			<text class="issue-head-username">{{riderName}}</text>
			<text class="issue-head-dateTime">{{deliveryD}}</text>
			<view class="issue-head-star-box" v-if="starsShow">
				<image v-for="(item,index) in starsMax" :key="index" :src="(index+1)>scoreNum?starDefault:starActive" :class="scoreNum==index+1?'active':''" mode="" @click="setScore(index+1)"></image>
			</view>
		</view>
		 <textarea v-if="textareaShow" v-model="infoReceive.textareaValue" :placeholder="textareaPlaceholder"/>
		 <view class="issue-btn-box">
		 	<button v-if="submitShow" class="submit-btn" type="primary" @click="doSubmit">{{submitText}}</button>
			<slot name="submit"></slot>
		 </view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				scoreNum:5
			}
		},
		props:{
			headPicShow:{ //图片
				type:[String,Boolean],
				default:true,
			},
			headPicValue:{
				type:String,
				default:require('@/static/st_pic.png')
			},
			
			headTitleShow:{ //标题
				type:[String,Boolean],
				default:true,
			},
			headTitleValue:{
				type:String,
				default:"描述相符"
			},
			riderName:{
				type:String,
				default:"匿名骑手"
			},
			deliveryD:{
				type:String,
				default:""
			},
			starsShow:{
				type:[String,Boolean],
				default:true,
			},
			starsMax:{ // 星星最大个数
				type:[String,Number],
				default:5,
			},
			starDefault:{ //未选中
				type:String,
				default:require('@/static/st_star.png'),
			},
			starActive:{
				type:String,
				default:require('@/static/st_star_active.png'),
			},
			score:{  //默认分数
				type:[Number,String],
				default:5
			},
			starsDisabled:{ //是否禁用star
				type:[Boolean],
				default:false
			},
			
			textareaShow:{ // 多行文本显示
				type:[String,Boolean],
				default:true,
			},
			textareaPlaceholder:{
				type:[String],
				default:"想说点什么…"
			},
			
			
			submitShow:{ // 发布按钮
				type:[String,Boolean],
				default:true,
			},
			submitText:{
				type:String,
				default:"提交",
			},
			
			infoReceive:{ // 获取值
				type:Object,
				default:function(){
					return {
						score:0,
						textareaValue:""
					}
				}
			}
		},
		computed:{
			formatScore(){
				return this.infoReceive.score
			}
		},
		methods: {
			/**
			 * @name 设置分数
			 */
			setScore(score){
				console.log(score)
				if(this.starsDisabled!==false)return
				let that = this
				that.scoreNum = score
				that.infoReceive.score=score
				this.$emit("scoreChange",score)
			},
			
			/**
			 * @name 获取textarea内容
			 */
			
			blur(e){
				this.infoReceive.textareaValue=e.detail.value
			},
			
			/**
			 * @name 提交
			 */
			doSubmit(){
				this.$emit('submit',this.infoReceive)
			}
		},
		created() {
			this.infoReceive.score=this.score
		}
	}
</script>
<style lang='scss'>
	$backgroundC:#f9f9f9;
	$borderColor:#f5f5f5;
	$white:#ffffff;
	$fontSize:28upx;
	$f8background:#F8F8F8;
	.issue {
		background-color: $white;
		
		&-head{
			background-color: $white;
			height: 100rpx;
			padding: 32rpx 0 40rpx 32rpx;
			width: 686rpx;
			&-pic{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				vertical-align: middle;
				margin-right: 18upx;
				float: left;
				margin-top: 4rpx;
			}
			&-username{
				width: 272px;
				float: left;
				font-size: 32rpx;
				color: #252631;
				font-weight: 700;
				margin-top: 12px;
			}
			&-dateTime{
				float: left;
				color: #999999;
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			&-title{
				line-height: 100upx;
				font-size: 30upx;
				vertical-align: middle;
				margin-right: 35upx;
			}
			
			&-star-box{
				display: inline-block;
				float: right;
				image{
					width: 38rpx;
					height: 36rpx;
					/* vertical-align: middle; */
					margin-right: 14rpx;
					margin-bottom: 4rpx;
				}
				/* image.active{
					animation: star_move ease-in 1 1s,star_rotate ease 1.5s infinite 1s;
				} */
			}
		}
		textarea{
			height: 332rpx;
			background-color: $f8background;
			font-size: $fontSize;
			color: #252631;
			box-sizing: border-box;
			line-height: 40upx;
			width: 694rpx;
			margin: 0 28rpx 0 28rpx;
			border-radius: 24rpx;
			padding: 14rpx 30rpx;
		}
		&-btn-box{
			padding: 40rpx 44upx;
			
			button{
				width: 662rpx;
				height: 92rpx;
				border-radius: 48rpx;
				font-size: 32rpx;
				background-color: #FE7701;
				line-height: 92rpx;
				color:#FFFFFF;
				font-weight: 700;
			}
		}
	}
	
	@keyframes star_move{
		from{
			width: 50upx;
			height: 50upx;
			transform: rotate(180deg)
		}
		to{
			width: 32upx;
			height: 32upx;
			transform: rotate(0)
		}
	}
	@keyframes star_rotate{
		0%{
			transform: rotateY(360deg)
		}
		100%{
			transform: rotateY(180deg)
		}
	}
</style>
